<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        align-items: center;
        margin-right: 20%;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div style="min-width: 1024px">
        <h4>请假类型管理</h4>
        <Alert show-icon>
            此处用于编辑请假时显示的请假类型列表。
        </Alert>
        <ButtonGroup>
            <Button type="success" @click="addModal=true">
                <Icon type="md-add-circle" />
                添加
            </Button>
            <Button type="warning" :disabled="deleteBtnEnable" @click="remove">
                <Icon type="md-close-circle" />
                删除
            </Button>
        </ButtonGroup>
        <Row>
            <Col span="9">
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                    @on-select="tableItemChecked" @on-select-cancel="tableItemChecked" @on-select-all="tableItemChecked"
                    @on-select-all-cancel="tableItemChecked"
                    style="margin-top:15px;">
                </Table>
            </Col>
        </Row>

        <!--<div style="margin: 10px;overflow: hidden">-->
        <!--<div style="float: right;">-->
        <!--<Page :total="total" size="large" show-total :current="current" show-elevator show-sizer-->
        <!--@on-change="changePage"></Page>-->
        <!--</div>-->
        <!--</div>-->

        <Modal v-model="addModal" title="添加请假外出类型" ok-text="保存" :footer-hide="modalFooter">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <FormItem label="请假类型" prop="restType">
                    <Row>
                        <Col span="11">
                            <Input v-model="formValidate.restType" placeholder="请输入请假类型" />
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Button @click="handleSubmit('formValidate')" type="primary">保存</Button>
                    <Button style="margin-left: 8px" @click="cancelBtnClicked">返回</Button>
                </FormItem>
            </Form>
        </Modal>

    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import baseUtil from '../../assets/utils/base-util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                deleteBtnEnable: true,
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '请假类型',
                        key: 'Title',
                    }
                ],
                selectedItems: [],
                addModal: false,
                formValidate: {
                    //添加字段
                    restType: '',
                },
                ruleValidate: {
                    restType: [
                        {required: true, message: '请假类型不能为空', trigger: 'blur'}
                    ],
                },
                modalFooter: true,
            }
        },
        mounted() {
            this.mockTableData();
        },
        methods: {
            handleEdit(row) {
                this.$set(row, '$isEdit', true)
            },
            handleSave(row) {
                this.$set(row, '$isEdit', false);

                this.tableEditSave(row);
                console.log('值:', row);

            },
            //行内编辑保存
            tableEditSave: function (row) {
                let that = this;
                let model = {
                    'id': row.id,
                    'typeName': row.value,
                }
                let params = that.$qs.stringify(model);
                this.$Loading.start();

                apiUtil.post(that, apiUtil.urls.EditRestType, params, function (res) {
                    that.$Loading.finish();
                    that.mockTableData();
                });
            },
            // 表格内选中及取消选中操作
            tableItemChecked: function(selection, row){
                this.selectedItems = selection;
                console.log(selection);
                if(this.selectedItems.length > 0){
                    this.deleteBtnEnable = false;
                }else{
                    this.deleteBtnEnable = true;
                }
            },
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            //列表总数据
            mockTableData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetRestTypes, params, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;

                    console.log('res:', res)
                });
            },
            //删除
            remove: function() {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '操作警告',
                    content: '即将删除选中的请假项，该操作不可逆转，请确认您的操作。',
                    onOk: function () {
                        this.$Loading.start();
                        var selectedItemIds = "";
                        for(var i = 0; i<that.selectedItems.length; i++){
                            selectedItemIds += that.selectedItems[i].Id.toString() + ",";
                        }
                        selectedItemIds = selectedItemIds.substring(0, selectedItemIds.length - 1);
                        let para = {id: selectedItemIds};
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.DelRestType, params, function (res) {
                            that.mockTableData();
                        });
                    }
                });
            },
            //添加
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.addData(model);
                });
            },
            addData: function (model) {
                let that = this;

                let params = that.$qs.stringify(model);
                this.$Loading.start();

                console.log(params);

                apiUtil.post(that,apiUtil.urls.AddRestType, params, function (res) {
                    that.$Loading.finish();
                    that.addModal = false;
                    that.mockTableData();

                    baseUtil.handleReset(that,'formValidate')
                    // that.$Modal.confirm({
                    //     title: '操作',
                    //     content: '请选择下一步操作',
                    //     okText: '继续添加',
                    //     cancelText: '返回列表',
                    //     onOk: () => {},
                    //     onCancel: () => {
                    //         baseUtil.pageJump(that,'','HolidayTypeList')
                    //     }
                    // });
                });
            },
            cancelBtnClicked: function(){
                this.addModal = false;
            },
        },
    }
</script>
